﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>生产工单列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test" lay-event="GetDataByCha"></table>
</div>
    <div id="pagination-container"></div>
<script type="text/html" id="toolbarDemo">
                 <!--条件查询-->
<form class="layui-form layui-row layui-col-space16" id="searchForm" lay-filter="searchFormFilter">
                  <div class="layui-col-sm3">
                      <div class="layui-form-item">
                                <label class="layui-form-label" >工单名称</label>
                          <div class="layui-input-block">
                                    <input type="text" name="WorkOrderName" placeholder="请输入工单名称" class="layui-input">
                          </div>
                      </div>
                  </div>

                  <div class="layui-btn-container layui-col-xs12">
                      <button class="layui-btn" lay-submit lay-filter="searchSubmit">查询</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
              </form>

  <div class="layui-btn-container">
                              <b><a style="color:red" href="http://localhost:8075/webroot/decision/view/duchamp?viewlet=%25E6%2598%258E%25E7%25BB%2586%25E8%25A1%25A8%252F%25E5%258F%2591%25E8%25B4%25A7%25E5%2592%258C%25E5%25BC%2580%25E7%25A5%25A8%25E9%2580%259A%25E7%259F%25A5.fvs&page_number=1" target="_blank">发货通知明细(帆软看板)</a></b><br />
                               <b><a style="color:blue" href="http://localhost:8075/webroot/decision/view/duchamp?viewlet=%25E6%2598%258E%25E7%25BB%2586%25E8%25A1%25A8%252F%25E5%258F%2591%25E8%25B4%25A7%25E5%2592%258C%25E5%25BC%2580%25E7%25A5%25A8%25E9%2580%259A%25E7%259F%25A5.fvs&page_number=2" target="_blank">开票通知明细（帆软看板）</a></b>
    <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="addSCWorkOrder">新增工单</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
    <button class="layui-btn layui-btn-sm" id="dropdownButton">
      下拉按钮 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
      重载测试 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
      <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
  </div>
       
</script>
<script type="text/html" id="toolDemo">
  <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs" lay-event="edit" data-id="{{d.workOrderId}}">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多 
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>        
</script>  

<script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
<script>
        layui.use(['table', 'dropdown', 'layer', 'form', 'jquery', 'laypage',], function () {
  var table = layui.table;
  var dropdown = layui.dropdown;
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.jquery;
  var laypage = layui.laypage;
            var tableIns;
            var totalCount = 0; // 新增：总记录数
            function initTable() 
            {
                tableIns = // 创建渲染实例
                    table.render({
                        elem: '#test',
                        url: 'http://localhost:5234/api/WorkOrder/GetSCWorkOrder', //此处为静态模拟数据，实际使用时需换成真实接口
                        // url: "@ViewBag.BaseUrl/T7/WorkOrder/GetSCWorkOrder",
                        toolbar: '#toolbarDemo',
                        defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips',
                            onClick: function (obj) { // 2.9.12+
                                layer.alert('自定义工具栏图标按钮');
                            }
                        }],
                        height: 'full-35', // 最大高度减去其他容器已占有的高度差
                        css: [ // 重设当前表格样式
                            '.layui-table-tool-temp{padding-right: 145px;}'
                        ].join(''),
                        cellMinWidth: 80,
                        totalRow: true, // 开启合计行
                        page: true,
                        request: {
                            pageName: 'PageIndex', // 对应后端分页参数名 PageIndex
                            limitName: 'PageSize'  // 对应后端分页参数名 PageSize
                        },
                        // 修正 where 中错误的 DOM 选择器（假设表单字段名正确）
                        where: {

                            WorkOrderName: $('[name="WorkOrderName"]').val()
                        },
                        limit: 15,
                        limits: [2, 4,6,8,15],
                        cols: [[
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'workOrderId', fixed: 'left', width: 80, title: '序号', sort: true, totalRow: '合计：' },
                            { field: 'workOrderNumber', width: 150, title: '工单编号' },
                            { field: 'workOrderName', width: 200, title: '工单名称' },
                            { field: 'item_name', title: '计划生产物品' },
                            { field: 'personinCharge', width: 100, title: '负责人' },
                            { field: 'affiliatedDepartment', title: '所在部门', width: 100 },
                            { field: 'plannedOutput', title: '工序数量', width: 120 },
                            { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                        ]],
                        done: function ( curr, count) {
                            var id = this.id;
                            // 下拉按钮测试
                            dropdown.render({
                                elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                                data: [{
                                    id: 'add',
                                    title: '添加'
                                }, {
                                    id: 'update',
                                    title: '编辑'
                                }, {
                                    id: 'delete',
                                    title: '删除'
                                }],
                                // 菜单被点击的事件
                                click: function (obj) {
                                    var checkStatus = table.checkStatus(id)
                                    var data = checkStatus.data; // 获取选中的数据
                                    switch (obj.id) {
                                        case 'add':
                                            layer.open({
                                                title: '添加',
                                                type: 1,
                                                area: ['80%', '80%'],
                                                content: '<div style="padding: 16px;">自定义表单元素</div>'
                                            });
                                            break;
                                        case 'update':
                                            if (data.length !== 1) return layer.msg('请选择一行');
                                            layer.open({
                                                title: '编辑',
                                                type: 1,
                                                area: ['80%', '80%'],
                                                content: '<div style="padding: 16px;">自定义表单元素</div>'
                                            });
                                            break;
                                        case 'delete':
                                            if (data.length === 0) {
                                                return layer.msg('请选择一行');
                                            }
                                            layer.msg('delete event');
                                            break;
                                    }
                                }
                            });

                            // 重载测试
                            dropdown.render({
                                elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                                data: [{
                                    id: 'reload',
                                    title: '重载'
                                }, {
                                    id: 'reload-deep',
                                    title: '重载 - 参数叠加'
                                }, {
                                    id: 'reloadData',
                                    title: '仅重载数据'
                                }, {
                                    id: 'reloadData-deep',
                                    title: '仅重载数据 - 参数叠加'
                                }],
                                // 菜单被点击的事件
                                click: function (obj) {
                                    switch (obj.id) {
                                        case 'reload':
                                            // 重载 - 默认（参数重置）
                                            table.reload('test', {
                                                where: {
                                                    abc: '123456',
                                                    //test: '新的 test2',
                                                    //token: '新的 token2'
                                                },
                                            });
                                            break;
                                        case 'reload-deep':
                                            // 重载 - 深度（参数叠加）
                                            table.reload('test', {
                                                where: {
                                                    abc: 123,
                                                    test: '新的 test1'
                                                },
                                                //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                                //cols: ins1.config.cols
                                            }, true);
                                            break;
                                        case 'reloadData':
                                            // 数据重载 - 参数重置
                                            table.reloadData('test', {
                                                where: {
                                                    abc: '123456',
                                                    //test: '新的 test2',
                                                    //token: '新的 token2'
                                                },
                                                scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                                height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                                //url: '404',
                                                //page: {curr: 1, limit: 30} // 重新指向分页
                                            });
                                            break;
                                        case 'reloadData-deep':
                                            // 数据重载 - 参数叠加
                                            table.reloadData('test', {
                                                where: {
                                                    abc: 123,
                                                    test: '新的 test1'
                                                }
                                            }, true);
                                            break;
                                    }
                                    layer.msg('可观察 Network 请求参数的变化');
                                }
                            });

                            // 行模式
                            dropdown.render({
                                elem: '#rowMode',
                                data: [{
                                    id: 'default-row',
                                    title: '单行模式（默认）'
                                }, {
                                    id: 'multi-row',
                                    title: '多行模式'
                                }],
                                // 菜单被点击的事件
                                click: function (obj) {
                                    var checkStatus = table.checkStatus(id)
                                    var data = checkStatus.data; // 获取选中的数据
                                    switch (obj.id) {
                                        case 'default-row':
                                            table.reload('test', {
                                                lineStyle: null // 恢复单行
                                            });
                                            layer.msg('已设为单行');
                                            break;
                                        case 'multi-row':
                                            table.reload('test', {
                                                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                                lineStyle: 'height: 95px;'
                                            });
                                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                                            break;
                                    }
                                }
                            });
                        },
                        error: function (res, msg) {
                            console.log(res, msg)
                        }
                    });
            }
            initTable();
        // 渲染分页组件
        function renderPagination(curr, total) {
            laypage.render({
                elem: 'pagination-container',
                count: count, // 总记录数
                curr: curr, // 当前页码
                limit: tableIns.config.limit, // 当前每页数量
                limits: tableIns.config.limits, // 可选每页数量
                jump: function (obj, first) {
                    if (!first) { // 非首次加载
                        tableIns.reload({
                            page: {
                                curr: obj.curr, // 新页码
                                limit: obj.limit // 新每页数量
                            },
                            where: tableIns.config.where // 携带原有查询条件
                        });
                    }
                }
            });
        }
            // 条件查询逻辑
            form.on('submit(searchSubmit)', function (data) {
                console.log('发送的查询参数：', data.field);
                if (!tableIns) {
                    layer.msg('表格未初始化，请检查页面加载');
                    return false;
                }
                tableIns.reload({
                    where: data.field, // 传递查询参数
                    page: { curr: 1 }, // 重置到第一页
                    done: function (res, curr, count) {
                        if (res.data.length === 0) {
                            layer.msg('未查询到符合条件的数据', { icon: 2 });
                        }
                    }
                });
                return false;
            });
  // 工具栏事件
  table.on('toolbar(test)', function(obj){
    var id = obj.config.id;
    var checkStatus = table.checkStatus(id);
    var othis = lay(this);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
        break;
      case 'getData':
        var getData = table.getData(id);
        console.log(getData);
        layer.alert(layui.util.escape(JSON.stringify(getData)));
        break;
       case 'addSCWorkOrder':
          window.location.href = '@Url.Action("SCWorkOrderAdd", "WorkOrder")';
          break;
    };
  });
  // 表头自定义元素工具事件 --- 2.8.8+
  table.on('colTool(test)', function(obj){
    var event = obj.event;
    console.log(obj);
    if(event === 'email-tips'){
      layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
        title: '当前列属性选项'
      });
    }
  });
  
  // 触发单元格工具事件
  table.on('tool(test)', function(obj){ // 双击 toolDouble
    var data = obj.data; // 获得当前行数据
    // console.log(obj)
    if(obj.event === 'edit'){
    // 获取当前行ID
    var id = data.workOrderId;
    // 跳转到编辑页面并传递ID
      window.location.href = '@Url.Action("SCWorkOrderJiBenQuery", "WorkOrder")?WorkOrderId=' + id;
      
    } else if(obj.event === 'more'){
      // 更多 - 下拉菜单
      dropdown.render({
        elem: this, // 触发事件的 DOM 对象
        show: true, // 外部事件触发即显示
        data: [{
          title: '查看',
          id: 'detail'
        },{
          title: '删除',
          id: 'del'
        }],
        click: function(menudata){
          if(menudata.id === 'detail'){
            layer.msg('查看操作，当前行 ID:'+ data.id);
          } else if(menudata.id === 'del'){
            layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
              obj.del(); // 删除对应行（tr）的DOM结构
              layer.close(index);
              // 向服务端发送删除指令
            });
          } 
        },
        id: 'dropdown-table-tool',
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
      });
    }
  });
  // table 滚动时移除内部弹出的元素
  var tableInst = table.getOptions('test');
  tableInst.elem.next().find('.layui-table-main').on('scroll', function() {
    dropdown.close('dropdown-table-tool');
  });
 
  // 触发表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
 
  // 触发表格单选框选择
  table.on('radio(test)', function(obj){
    console.log(obj)
  });
  
  // 行单击事件
  table.on('row(test)', function(obj){
    //console.log(obj);
    //layer.closeAll('tips');
  });
  // 行双击事件
  table.on('rowDouble(test)', function(obj){
    console.log(obj);
  });
 
  // 单元格编辑事件
  table.on('edit(test)', function(obj){
    var field = obj.field; // 得到字段
    var value = obj.value; // 得到修改后的值
    var data = obj.data; // 得到所在行所有键值
    // 值的校验
    if(field === 'email'){
     
        layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});
        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
    }
    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
    // …
    layer.msg('编辑成功', {icon: 1});
    
    // 其他更新操作
    var update = {};
    update[field] = value;
    obj.update(update);
  });
});
</script>
</body>
</html>